<template>
    <div class="navbar-fixed-top" style="position: sticky;top: 0;background: white; z-index: 1">
        <myHeader></myHeader>
        <tab></tab>
    </div>
    <div class="singers" v-loading="!singers.length"
         element-loading-background="rgba(122, 122, 122, 0.8)"
         element-loading-text="Loading..."
    >
<!--        <router-view :singer="mySelectSinger" />      &lt;!&ndash; 渲染二级路由 &ndash;&gt;-->
        <index-list :data="singers" @select="selectSinger"></index-list>
    </div>
</template>

<script>
import {GetSingerList} from "@/service/singer";
import IndexList from "@/components/indexList";
import { useRouter } from 'vue-router'
import tab from "@/components/tab";
import myHeader from '@/components/header'
import storage from 'good-storage'
import {SINGER_KEY} from "@/assets/js/constant";

export default {
    name: 'singer',
    components: {IndexList,myHeader,tab},
    data(){
      return {
          singers: [],
          mySelectSinger: null
      }
    },
    async created(){
        const result = await GetSingerList()
        this.singers = result.singers
        //console.log(result)
    },
    methods:{
        selectSinger(singer){
            let mySelectSinger = singer;
            this.cacheSinger(mySelectSinger)
            //console.log(mySelectSinger)
            this.$router.push({
                name: 'singerDetail',
                params:{
                    title: mySelectSinger.name,
                    pic: mySelectSinger.pic,
                    mid: mySelectSinger.mid
                }
            })
        },
        cacheSinger(singer){
            storage.session.set(SINGER_KEY,singer)   //  const SINGER_KEY = '__singer__'
        }
    }
}

</script>

<style>

</style>
